<template>
	<view v-if="visible" class="page">
		<cus-navbar id="navbar" title="" titleColor="#fff" bgColor="inherit" @back="hide"></cus-navbar>
		<image class="default-cover cover" :src="detail.cover" mode="scaleToFill"></image>
		<view class="title">{{chapterName}}</view>
	</view>
	<!-- 	<view id="_drag_button" class="drag text-sm flex justify-start align-center"
		:style="'left:'+left+'px;top:'+top+'px;'" @click.stop.prevent="click" @touchmove.stop.prevent="touchmove"
		@touchend="touchend"
		:class="[!isMove?'transition':'', open?'margin-left animation-slide-left':'animation-slide-right']">
		<view v-if="open" class="flex justify-start align-center openDrag">
			<view class="audio-title margin-lr-sm">
				<view id="title" class="animation" :style="{animationDuration: `${animateDuration}s`}">{{title}}</view>
			</view>
			<view class="iconfont margin-lr-sm" :class="pause?'icon-kaishi':'icon-zantingtingzhi'" @tap="tapPause">
			</view>
			<view class="cuIcon-close margin-lr-sm" @tap="tapClose"></view>
		</view>
		<view v-else class="cuIcon-right margin-lr-xs padding-left-sm" @tap="tapOpen"></view>
	</view> -->
</template>

<script>
	export default {
		name: 'drag-button',
		props: {
			bookId: {
				type: String,
				default: ''
			},
			chapterName: {
				type: String,
				default: ''
			},
			content: {
				type: String,
				default: ''
			},
			styleBottom: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				visible: false,
				// open: true,
				// top: 0,
				// left: 0,
				// width: 0,
				// height: 0,
				// offsetWidth: 0,
				// offsetHeight: 0,
				// windowWidth: 0,
				// windowHeight: 0,
				// isMove: true,
				// edge: 10,
				// pause: false,

				// audioPlay: false,
				// audio: [],
				// curAudio: null,
				// audioIndex: 0,

				// animateDuration: 4,
			}
		},
		computed: {
			detail() {
				let readHistory = this.$store.getters.get_readHistory
				let idx = readHistory.findIndex(item => item._id === this.bookId)
				return readHistory[idx]
			}
		},
		mounted() {
			// const sys = uni.getSystemInfoSync();
			// this.windowWidth = sys.windowWidth;
			// this.windowHeight = sys.windowHeight;

			// if (sys.windowTop) {
			// 	this.windowHeight += sys.windowTop;
			// }
			// this.getComponentHeight();
			// this.toRead();
			// this.tapOpen();
		},
		beforeDestroy() {
			this.hide()
			// this.tapClose();
		},
		methods: {
			show() {
				this.visible = true
			},
			hide() {
				this.visible = false
			},
			// getComponentHeight() {
			// 	const query = uni.createSelectorQuery().in(this);
			// 	query.select('#_drag_button').boundingClientRect(data => {
			// 		if (data != null) {
			// 			this.width = data.width;
			// 			this.height = data.height;
			// 			this.offsetWidth = data.width / 2;
			// 			this.offsetHeight = data.height / 2;
			// 			this.top = this.windowHeight - this.height - this.edge - this.styleBottom;
			// 		}
			// 	}).select('#title').boundingClientRect(data => {
			// 		if (data.width > 159) { //计算文本长度
			// 			this.animateDuration = (4 * data.width / 159).toFixed(2) //动画过渡时间
			// 			console.log(this.animateDuration)
			// 		}
			// 	}).exec();
			// },
			// toRead() {
			// 	this.audioPlay = !this.audioPlay;

			// 	console.log(this.audioPlay)
			// 	if (this.audioPlay) {
			// 		let content = this.content.replace(/<[^>]+>/g, '').replace(/&nbsp;/g, '')
			// 		this.audio = [this.title, ...content.split('。')]
			// 		this.subFunc();
			// 	} else {
			// 		this.curAudio.pause()
			// 	}
			// },
			// async subFunc() {
			// 	if (this.audioIndex < this.audio.length) {
			// 		this.curAudio = await this.$Voice({
			// 			voiceSet: {
			// 				tex: this.audio[this.audioIndex]
			// 			},
			// 			returnAudio: true
			// 		})
			// 		this.curAudio.onPlay(() => {
			// 			console.log('音频开始播放了')
			// 		})
			// 		this.curAudio.play();
			// 		this.curAudio.onEnded(() => {
			// 			this.curAudio = null;
			// 			this.audioIndex++;
			// 			this.subFunc();
			// 		})
			// 	} else {
			// 		this.tapClose();
			// 	}
			// },
			// click() {
			// 	this.$emit('btnClick');
			// },
			// touchmove(e) {
			// 	// 单指触摸
			// 	if (e.touches.length !== 1) {
			// 		return false;
			// 	}

			// 	this.isMove = true;

			// 	let clientY = e.touches[0].clientY - this.offsetHeight;
			// 	// #ifdef H5
			// 	clientY += this.height;
			// 	// #endif
			// 	let edgeBottom = this.windowHeight - this.height - this.edge - this.styleBottom;

			// 	// 上下触及边界
			// 	if (clientY < this.edge) {
			// 		this.top = this.edge;
			// 	} else if (clientY > edgeBottom) {
			// 		this.top = edgeBottom;
			// 	} else {
			// 		this.top = clientY;
			// 	}

			// },
			// touchend(e) {
			// 	this.isMove = false;
			// },
			// tapOpen() {
			// 	this.open = true;

			// 	setTimeout(() => {
			// 		this.open = false;
			// 	}, 5000)
			// },
			// tapPause() {
			// 	this.pause = !this.pause;

			// 	if (this.pause) {
			// 		this.curAudio.pause();
			// 	} else {
			// 		this.curAudio.play();
			// 	}
			// },
			// tapClose() {
			// 	if (this.curAudio) {
			// 		this.curAudio.stop();
			// 		this.curAudio.destroy();
			// 		this.curAudio = null;
			// 		this.animationData = {}

			// 		// 为了在每个页面都可以监听语音播报悬浮窗
			// 		this.$set(this.$audioDrag, 'show', false)
			// 		this.$set(this.$audioDrag, 'title', null)
			// 		this.$set(this.$audioDrag, 'content', null)
			// 	}
			// },
		}
	}
</script>

<style lang="scss">
	.page {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1024;
		background-color: #516D71;

		.cover {
			width: 120px;
			height: 160px;
		}

		.title {
			color: #FFFFFF;
		}
	}

	// .drag {
	// 	background-color: rgba(0, 0, 0, 0.5);
	// 	box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.4);
	// 	color: $uni-text-color-inverse;
	// 	height: 100rpx;
	// 	position: fixed;
	// 	z-index: 999999;

	// 	&.transition {
	// 		transition: left .3s ease, top .3s ease;
	// 	}

	// 	.audio-title {
	// 		width: 300rpx;
	// 		max-width: 300rpx;
	// 		overflow: hidden;
	// 		white-space: nowrap;

	// 		.animation {
	// 			display: inline-block;
	// 			white-space: nowrap;
	// 			animation: 5s wordsLoop linear 0s infinite;
	// 		}

	// 		@keyframes wordsLoop {
	// 			from {
	// 				transform: translateX(300rpx)
	// 			}

	// 			to {
	// 				transform: translateX(calc(-100%))
	// 			}
	// 		}
	// 	}

	// 	.openDrag {
	// 		animation: dragShow 1s forwards;
	// 	}

	// 	@keyframes dragShow {
	// 		to {
	// 			visibility: visible;
	// 			opacity: 1;
	// 			transform: translateX(0);
	// 		}
	// 	}
	// }
</style>
